<template>
  <div class='index'>
    <!-- v-model 双向绑定：哪一个下标的频道处于活动状态 -->
    <van-tabs v-model="activeIndex">
      <van-tab
        v-for="channel in channels"
        :key="channel.id"
        :title="channel.name">
        <!--
          van-tab是使用v-for循环的，每一个van-tab下都会有一个article-list
          并且，它有类似于懒加载的效果： 只有当前的van-tab 被激活之后，才会
          去加载它对应的article-list

          (1) 把当前的频道传给子组件article-list
          (2) 监听子组件article-list传出来的showMoreAction事件
        -->
        <article-list
        :channel="channel"
        @showMoreAction="hShowMoreAction"></article-list>
      </van-tab>
    </van-tabs>

    <!-- 频道列表 开关 通过定位 -->
    <div class="bar-btn" v-if="$store.state.tokenInfo.token" @click="showChannelEdit=true">
        <van-icon name="wap-nav"/>
    </div>

    <!-- 文章--更多操作 -->
    <!-- 1. 在子组件监听 不感兴趣 -->
    <!-- 2. 在子组件监听 举报文章 -->
    <!-- 添加ref属性是为了能够在父组件index.vue中通过this.$refs.refMoreAction
    来获取more-action组件的引用 -->
    <!-- moreAction组件只有当van-popup显示时，才会去创建 -->
    <van-popup v-model="showMoreAction" :style="{ width: '80%' }">
      <more-action
        ref="refMoreAction"
        @report="hReport"
        @dislike="hDislike">
      </more-action>
    </van-popup>

    <!--
      频道管理的弹层
      1. 把当前的订阅频道传入子组件
      2. 把当前选中的频道（激活的）下标传给子组件
    -->
    <van-action-sheet v-model="showChannelEdit">
      <channel-edit
      :activeIndex="activeIndex"
      :channels="channels"
      @updateCurChannel="hUpdateCurChannel"
      @updateCurIndex="hUpdateCurIndex"
      ></channel-edit>
    </van-action-sheet>
  </div>
</template>

<script>
// 引入封装好的方法
// 1. 准备一个数据项channels
// 2. 发请求，把频道列表保存channels中
// 3. 用v-for在视图对channels进行渲染
import { getChannels } from '@/api/channel'
import { dislikeArticle, reportArticle } from '@/api/article'
import ArticleList from './articleList'
import MoreAction from './moreAction'
import ChannelEdit from './channelEdit'
export default {
  name: 'Home',
  props: { },
  components: {
    ArticleList,
    MoreAction,
    ChannelEdit
  },
  data () {
    return {
      activeIndex: 0, // 当前tabs中，处于活动状态的是哪一个下标
      articleId: null, // 当前要执行更多操作的 文章编号
      channels: [], // 已经订阅的频道列表
      showChannelEdit: false, // 默认不展示频道管理弹层
      showMoreAction: false // 默认不展示更多操作的弹层
    }
  },
  computed: { },
  created () {
    this.loadChannels()
    console.log('在index.vue中访问事件总线', this.$eventBus)
  },
  methods: {
    delArticle () {
      // 通过事件总线去发布一个消息，告诉articleList组件，去删除对应的文章
      // 参数是：当前要删除的文章编号 及当前的频道编号
      const eventObj = {
        articleId: this.articleId,
        channelId: this.channels[this.activeIndex].id
      }
      // console.log(eventObj)
      this.$eventBus.$emit('delArticle', eventObj)
    },
    async loadChannels () {
      try {
        const result = await getChannels()
        console.log(result)
        this.channels = result.data.data.channels
      } catch (err) {
        console.log(err)
      }
    },
    // 处理子组件中抛出的：显示更多操作 的弹层
    // 1. 显示弹层：更多操作
    // 2. 保存后续要操作的文章编号
    // 3. 设置moreAction组件中isReport为false.
    //    以确保每次显示更多操作时，都是停留在状态1.
    //    本质就是在父组件中去修改子组件中的数据
    hShowMoreAction (articleId) {
      this.showMoreAction = true
      this.articleId = articleId

      // console.log(this.$refs.refMoreAction)
      // (1) 在popup没有弹出来之前，MoreAction组件并没有创建
      // 所以 这里需要添加if来判断一下。

      // (2) this.$refs.refMoreAction 就表示了moreAction组件，
      // 我们可以直接去操作它的数据项, 调用它的方法
      if (this.$refs.refMoreAction) {
        // this.$refs.refMoreAction.mtmyk()
        this.$refs.refMoreAction.isReport = false
      }

      // this.$nextTick(() => {
      //   this.$refs.refMoreAction.isReport = false
      // })
    },
    // 处理用户在弹层中选择的 不感兴趣
    async hDislike () {
      console.log('用户点击了， 不感兴趣,当前要操作的文章编号是：', this.articleId)
      // 1. 调用后端接口
      const result = await dislikeArticle(this.articleId)
      console.log(result)
      // 2. 退出弹层
      this.showMoreAction = false

      // 3. 把用户点击的那个文章删除掉
      this.delArticle()
    },
    // 处理用户在弹层中选择的 举报文章
    async hReport (reportTypeId) {
      console.log(reportTypeId)
      // 1. 调用接口
      const result = await reportArticle(this.articleId, reportTypeId)
      console.log(result)
      // 2. 关闭弹层
      this.showMoreAction = false

      // 3. 把用户点击的那个文章删除掉
      this.delArticle()
    },
    // 处理频道管理中的 hUpdateCurChannel
    hUpdateCurChannel (channel) {
      // 1）关闭弹层
      this.showChannelEdit = false

      // 2）切换到当前点击的频道上去
      //    设置当前的激活频道
      const idx = this.channels.findIndex(item => item.id === channel.id)

      if (idx !== -1) {
        this.activeIndex = idx
      }
    },
    // 解决删除我的频道时，出现的小bug
    hUpdateCurIndex (idx) {
      this.activeIndex = idx
    }
  }
}
</script>

<style scoped lang='less'></style>
